<template>
  <div class="h100%" v-loading="ctx.loading" style="">
    <div class="mk-bill-panel-button">
      <MkButtonQueryHistory @click="listRef.open()" />
      <MkButtonAdd @click="newEntity" :isEdit="ctx.isEdit" />
      <MkButtonSubmit @click="submit" :loading="ctx.loading" :color="getThemeAdjustColor(10)" />
    </div>
    <MkPanel title="销毁信息">
      <MkForm :col="3">
        <MkSelectUser label="销毁人" v-model="ctx.xiaoHuiRenId" prop="xiaoHuiRenId" :isEdit="ctx.isEdit" />
        <MkSelectEdit label="销毁方式" v-model="ctx.xiaoHuiFangShi" prop="xiaoHuiFangShi" :isEdit="ctx.isEdit"
        :options="[{title: '统一销毁', canEdit: false}, {title: '到期销毁', canEdit: false}, {title: '', canEdit: true}]" />
      </MkForm>
    </MkPanel>
    <div style="flex: 1; display: flex; width: 100%;">
      <div style="width: 35%; border-right: 5px solid #ccc;" v-if="ctx.isEdit">
        <MkPanel title="待销毁血袋">
          <ListDaiXiaoHui />
        </MkPanel>
      </div>
      <div style="flex: 1; width: 64%;">
        <MkPanel title="本次销毁血袋">
          <MkForm :col="1">
            <el-form-item label="扫描血液" size="large">
              <MkXueYeScanInput />
            </el-form-item>
          </MkForm>
          <MkTable :data="ctx.list">
            <MkColumnIndex width="45px" />
            <MkColumnXueYe />
            <MkColumn prop="jieShouShiJian" label="接收时间" />
            <MkColumn prop="jieShouRenId" label="接收人" />
            <MkColumn prop="huiShouShiJian" label="回收时间" />
            <MkColumn prop="huiShouRenId" label="回收人" />
            <MkColumnOption v-if="ctx.isEdit" />
          </MkTable>
        </MkPanel>
      </div>
    </div>
    <List ref="listRef" @load="loadEntity" />
  </div>
</template>

<script lang='ts' setup>
import { getThemeAdjustColor, isNull } from '/@/utils/index'
import ListDaiXiaoHui from './listDaiXiaoHui.vue'
import List from './list.vue'  

const initState = () => {
  return {
    isEdit: false,
    loading: false,
    xiaoHuiRenId: undefined,
    xiaoHuiFangShi: undefined,
    list: []
  }
}
const ctx = reactive(initState())
const listRef = ref()

const newEntity = () => {
  Object.assign(ctx, initState())
  ctx.isEdit = true
}
const submit = () => {

}
const loadEntity = () => {

}
</script>

<style lang='scss' scoped>
.mk-bill-panel-button {
  padding: 10px;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 10px;

  :deep(.el-button + .el-dropdown) {
    margin-left: 12px !important;
  }

  :deep(.el-dropdown + .el-button) {
    margin-left: 12px !important;
  }

  :deep(.el-dropdown + .el-dropdown) {
    margin-left: 12px !important;
  }
}
</style>